<template>
	<yd-layout id='goodsAddr' class=''>
		<div class="goods_list">
			<input placeholder="收货人" v-model.trim="form.reciver_name" type="text" />
		</div>
		<div class="goods_list">
			<input v-model.trim.number="form.mobile" type="number" pattern="\d*" oninput="if(value.length>11)value=value.slice(0,11)" class="list_input" placeholder="联系电话" />
		</div>
		<div class="goods_list_area" :style="{color:areaFlg?'#333333':'#999999'}" @click="showCity=true">
			<div>{{areaFlg?area:'省份、城市、区县'}}</div>
			<img src="../../../assets/bd_img/right.png" alt="" />
		</div>
		<div class="goods_list">
			<input placeholder="详细地址" v-model.trim="form.address" type="text" />
		</div>
		<div @click="submit" class="btn">保存</div>
		<yd-cityselect v-model="showCity" :callback="getArea" :items="district"></yd-cityselect>
	</yd-layout>
</template>

<script>
	import { CitySelect } from 'vue-ydui/dist/lib.rem/cityselect';
	import District from 'ydui-district/dist/jd_province_city_area_id';
	console.log(JSON.stringify(District))
	export default {
		components: {
			[CitySelect.name]: CitySelect
		},
		data() {
			return {
				form: {
					province: "", //省
					city: '', //市
					area: '', //区、县
					reciver_name: '', //收货人姓名
					address: '', //收货人详细地址
					mobile: '', //电话
				},
				showCity: false,
				model1: '',
				district: District,
				area: '',
				areaFlg: false,
				areaObj: {},
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '收货地址'
			if(this.$route.query.id) {
				this.getAddress();
			}

		},
		methods: {
			getAddress() {
				this.$root.ajax({
					name: 'shop/address',
					type: 'get',
					params: {
						id: this.$route.query.id
					}
				}).then((d) => {
					this.areaFlg = true;
					this.form = Object.assign({}, this.form, d.data);
					this.area = d.data.province + '、' + d.data.city + '、' + d.data.area;
				})
			},
			getArea(ret) {
				console.log(ret)
				this.areaFlg = true;
				this.areaObj = ret
				this.area = ret.itemName1 + '、' + ret.itemName2 + '、' + ret.itemName3;
			},
			submit() {
				if(!this.form.reciver_name) {
					this.$dialog.toast({
						mes: '请填写收货人',
						timeout: 1500,
					});
					return
				}
				if(!this.form.mobile) {
					this.$dialog.toast({
						mes: '请输入联系电话',
						timeout: 1500
					});
					return
				} else {
					var phoneReg = /^1[3456789]\d{9}$/;
					if(phoneReg.test(this.form.mobile)) {

					} else {
						let msg = '请输入11位手机号码'
						if((this.form.mobile+'').length==11){
							msg='输入的手机号格式不对'	
						}
						this.$dialog.toast({
							mes: msg,
							timeout: 1500
						});
						return
					}
				}
				if(!this.areaFlg) {
					this.$dialog.toast({
						mes: '请选择省份、城市、区县',
						timeout: 1500,
					});
					return
				} else {
					this.form.province = this.areaObj.itemName1||this.form.province
					this.form.city = this.areaObj.itemName2||this.form.city
					this.form.area = this.areaObj.itemName3||this.form.area
				}
				if(!this.form.address) {
					this.$dialog.toast({
						mes: '请输入详细地址',
						timeout: 1500,
					});
					return
				}

				this.save()
			},
			save() {
				let name = 'shop/address/add'
				let params = {
					province:this.form.province,
					city:this.form.city,
					area:this.form.area,
					reciver_name:this.form.reciver_name,
					address:this.form.address,
					mobile:this.form.mobile,
				}
				if(this.$route.query.id){
					name = 'shop/address/modify';
					params.id = this.$route.query.id
				}
				this.$root.ajax({
					name: name,
					params: params
				}).then((d) => {
					this.$router.go(-1)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './goodsAddr.scss';
</style>